<!DOCTYPE HTML>
<html>
<head>
    <title>首次注册部落管理</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/scripts/boot.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/icons.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/bootstrap/skin.css">
    <link rel="stylesheet" href="/editor/common.css">
    <script src="/scripts/miniui/miniui.js"></script>
</head>
<body style="padding: 0;width: 100%;height: 98%">
<div style="width:100%;height:100%;">
    <div showCollapseButton="true" style="height: 100%">
        <div id="outImg">
            <img id="imgId" src="" alt="" onclick="smallImg()">
        </div>
        <div style="width:99%;">
            <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
                <table style="width:100%;">
                    <tr>
                        <td style="width:100%;">
                            <a class="mini-button" iconCls="icon-add" onclick="regTribeAdd()">增加</a>
                            <a class="mini-button" iconCls="icon-remove" onclick="regTribeRemove()">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div id="datagrid1" class="mini-datagrid" style="width:99%;height: 95%;"
             url="/tribeRoute/regTribeDefault" idField="id" allowResize="true"
             sizeList="[20,30,50,100]" pageSize="20"
        >
            <div property="columns">
                <div type="checkcolumn"></div>
                <div field="id" width="80" align="center" headerAlign="center">objectId</div>
                <div field="objectId" width="80" align="center" headerAlign="center">部落ID</div>
                <div field="name" width="50" align="center" headerAlign="center">部落名称</div>
                <div field="tribeAvator" width="30" align="center" headerAlign="center">部落头像</div>
                <div field="qrCode" width="40" align="center" headerAlign="center">部落二维码</div>
                <div field="createdAt" width="40" align="center" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss">
                    创建日期
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    let flag = 1;
    mini.parse();
    let  grid = mini.get("datagrid1");
    grid.load();
    grid.on("drawcell", function (e) {
        var value = e.value;
        var column = e.column;
        if (column.field == "tribeAvator") {
            if (value) {
                e.cellHtml = '<img class="bigImg" onclick="bigImg()" src="' + value + '?imageMogr2/thumbnail/640x/format/jpg/interlace/1/auto-orient" width="30" height="30" alt="图片">';
            } else {
                e.cellHtml = '<img class="bigImg" onclick="bigImg()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
            }
        }

        if (column.field == "qrCode") {
            if (value) {
                e.cellHtml = '<img class="bigImg" onclick="bigImgCode()" src="' + value + '" width="30" height="30" alt="图片">';
            } else {
                e.cellHtml = '<img class="bigImg" onclick="bigImgCode()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
            }
        }
    })

    function regTribeAdd() {
        mini.open({
            url: "/tribeRoute/regTribeAdd",
            title: "新增部落", width: 600, height: 400,
            ondestroy: function (action) {
                grid.reload();
            }
        });
    }

    function regTribeRemove() {
        let row = grid.getSelected();
        if (row) {
            $.ajax({
                url:"/tribeRoute/regTribeRemove",
                type:'POST',
                data:{
                    objectId:row.id
                },
                success:function (result) {
                    if(result){
                        alert("删除成功");
                        grid.reload();
                    }
                }
            });
        } else {
            alert("请选中一条记录");
        }

    }

    function bigImg() {
        var row = grid.getSelected();
        if (row) {
            if (flag == 1) {
                var path = row.tribeAvator;
                console.log(path);
                $("#imgId").attr('src', path);
                $("#outImg").css('display', 'block');
            }
        }
    }
    function bigImgCode() {
        var row = grid.getSelected();
        if (row) {
            if (flag == 1) {
                var path = row.qrCode;
                $("#imgId").attr('src', path);
                $("#outImg").css('display', 'block');
            }
        }
    }
    function smallImg() {
        $("#outImg").css('display', 'none');
    }

</script>
</html>
